
import React, { useState, useEffect } from "react";
import { Form, Input, Select, Button, Table, Space, Switch, } from "antd";

import api from '../../../api'
const Help = () => {
    let [data, setData] = useState()
    // dom渲染后 componentDidMount
    useEffect(() => {
        getData()
    }, [])
    const getData = async () => {
        const { data: res } = await api.getHelpTable()
        console.log(res);
        res.data = res.data.filter(item => {
            return item.key = item.QuestionID
        })
        setData([...res.data])
    }
    const { form } = Form.useForm(),
        { Option } = Select,
        columns = [{
            title: "序号",
            dataIndex: "QuestionID",
            key: "QuestionID",
            align: 'center'
        },
        {
            title: "文章标题",
            dataIndex: "QuestionTitle",
            key: "QuestionTitle",
            align: 'center'
        },
        {
            title: "创建人",
            dataIndex: "QuestionName",
            key: "QuestionName",
            align: 'center'
        },
        {
            title: "创建日期",
            key: "QuestionTime",
            dataIndex: "QuestionTime",
            align: 'center'
        },
        {
            title: "状态",
            dataIndex: "status",
            key: "status",
            align: 'center',
            render: (text) => (<Switch
                checkedChildren='开启'
                unCheckedChildren='关闭'
                defaultChecked={text} />)
        },
        {
            title: "操作",
            key: "action",
            align: 'center',
            render: (text, record) => (
                <Space >
                    <Button type='text'>编辑</Button>
                    <Button type='text'>删除</Button>
                </Space>
            ),
        },]


    const onGenderChange = () => { };
    return (
        <div>
            <p className="header_title">咨讯管理</p>
            <div className="order_main">
                <Form layout="inline" form={form}>
                    <Form.Item label="搜索：">
                        <Input placeholder="资讯名称" />
                    </Form.Item>
                    <Form.Item label="状态：">
                        <Select placeholder="请选择" onChange={onGenderChange} allowClear>
                            <Option value="male">请选择</Option>
                            <Option value="female">开启</Option>
                            <Option value="other">关闭</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item>
                        <Button>查询</Button>
                        <Button type='primary' style={{ marginLeft: '10px' }}>新增</Button>
                    </Form.Item>
                </Form>
                <Table align='center' columns={columns} dataSource={data} />
            </div>
        </div>
    );
};

export default Help;
